<template>
  <view class="loveCar">
    <view class="uni-form-ocr">
    </view>
    <view class="uni-form-item" v-for="(item, index) in carList">
      <view class="title">{{ item.typeName }}</view>
      <view class="title">车牌：{{ item.licensePlate }}</view>
      <view class="title">车型：{{ item.carModel }}</view>
      <view class="title">vin：{{ item.vin }}</view>
      <view class="tt_mo_ren">

        <image class="check-img" :src="getCheckImg(item)" @click="itemClick(item, index)">
        </image>
        <text> 设为默认车辆</text>
      </view>
      <view class="tt_con">
        <view class="title_cha" @click="chaCar(item)">查看电池报告</view>
        <view class="title_del" @click="delCar(item)">删除</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref,
  defineProps,
  computed,
  watch,
  reactive
} from 'vue'
import {
  RSAencrypt,
  RSAdecrypt
} from "../../utils/rsa.js"
const inputValue = ref('')
const date = ref('')
const brand = ref('')
const carModel = ref('')
const phoneNumber = ref('')
const engineNumber = ref('')
const vin = ref('')


onMounted(() => {
  getInfo()
})
const chaCar = (item) => {
  //  跳转页面
  uni.navigateTo({
    url: "../healthy/healthy?otherVin=" + item.vin
  })
}

// params: {
//       vin: RSAencrypt(item.vin),
//       openId: RSAencrypt(item.openId),
//     },
const itemClick = (item, index) => {
  carList.value.map((item) => {
    item.moRen = false;
    return item;
  });
  // 设置为默认车辆
  carList.value[index].moRen = true;

  uni.request({
    url: 'https://www.chargesystem.cn/charge4gv2/wechat/bindVin?vin=' + RSAencrypt(item.vin) + '&openid=' + RSAencrypt(item.openId),
    method: 'GET',
    success: (res) => {
      if (res.data.code === 200) {
        uni.showToast({
          title: '设置默认成功！',
          icon: 'none'
        });

      }
    },
    fail: (err) => {
      console.log(err, 'err')
      uni.showToast({
        title: '请求失败',
        icon: 'none'
      });
    }
  });



}
const getCheckImg = (item) => {
  console.log(item, 'getcheckimg')
  let imageName = ''
  imageName = item.moRen ? 'checkbox-icon' : 'no-checkbox-icon'
  return `/static/select/${imageName}.png`
}
const delCar = (item) => {
  uni.showModal({
    title: '提示',
    content: '确认删除车辆吗?',
    success: res => {
      if (res.confirm) {
        // console.log('1111111',RSAencrypt(item.vin),'222',RSAencrypt(item.openId))
        uni.request({
          url: 'https://www.chargesystem.cn/charge4gv2/wechat/removeMyCar',
          method: 'POST',
          data: {
            vin: RSAencrypt(item.vin),
            openId: RSAencrypt(item.openId),
          },
          success: (res) => {
            if (res.data.code === 200) {
              uni.showToast({
                title: '删除成功！',
                icon: 'none'
              });
              getInfo()
            }
          },
          fail: (err) => {
            console.log(err, 'err')
            uni.showToast({
              title: '请求失败',
              icon: 'none'
            });
          }
        });
      } else if (res.cancel) {
        console.log('用户点击取消');
      }
    }
  });
}
const carList = ref([])
const getInfo = () => {
  let deOpenId = RSAencrypt(uni.getStorageSync('openid'))
  carList.value = []
  uni.request({
    url: 'https://www.chargesystem.cn/charge4gv2/wechat/getMyCar?openid=' + deOpenId,
    method: 'GET',
    success: (res) => {
      if (res.data.code === 200) {
        carList.value = res.data.result;
        let vin = uni.getStorageSync('vin');

        carList.value.map(item => {
          item.moRen = false;
          if (item.vin == vin) {
            item.moRen = true;
          } else {
            item.moRen = false;
          }
          return item;
        })


      }
    },
    fail: () => {
      uni.showToast({
        title: '请求失败',
        icon: 'none'
      });
    }
  });
}

</script>
<style lang="scss" scoped>
.tt_mo_ren {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.check-img {
  width: 16px;
  height: 16px;
}

.uni-form-ocr {
  display: flex;
  justify-content: center;
  padding: 40rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
}

.tt_con {
  display: flex;
  justify-content: space-between;
  // padding: 0 24rpx;
}

.title_cha {
  color: #56cba6;
  padding: 20rpx 0;
  cursor: pointer;
}

.picker {
  padding: 10px;
  background-color: #fff;
  text-align: center;
}

.uni_name {
  display: flex;
  align-items: center;
}

.title_del {
  padding: 20rpx 0;
  color: #dcc28d;
  cursor: pointer;
}

.loveCar {
  // padding: 20rpx;
  background-color: #f2f2f2;
  min-height: 1200rpx;
  padding-bottom: 40rpx;

  .uni-form-item {
    background-color: #fff;
    margin: 24rpx;
    padding: 24rpx;
    border-radius: 12rpx;
    line-height: 40rpx;
    height: 300rpx;
    color: #000;
    font-size: 32rpx;
    font-weight: 500;

    .title {
      margin-right: 20rpx;
    }
  }

  .uni-label {
    width: 80%;
    font-size: 26rpx;
    margin-bottom: 20rpx;
  }

  .uni-input {
    // margin: 0 20rpx;
    width: 500rpx;
    border-bottom: solid 2rpx #ccc;
  }

  .search {
    margin: 0 auto;
    width: 300rpx;
    height: 60rpx;
    background-color: #0076ff;
    border-radius: 10rpx;
    text-align: center;
    line-height: 60rpx;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>